<template>
    <div id="SingerInfo_1">
        <div class="container">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <div class="wrapper">
                    <div style="display: inline-block" class="wrapper-left">
                        <!-- <el-form-item label="歌手ID：">
                            <el-input class="w" v-model="form.externalId" :disabled="true"></el-input>
                        </el-form-item> -->

                        <!-- <el-form-item label="接入名称：">
                            <el-input class="w" v-model="form.importName"></el-input>
                        </el-form-item> -->

                        <el-form-item label="歌手名：" prop="name">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.name" @input.native="singerSearch">
                                <!-- <span slot="suffix" class="iconfont icon-qita" @click="handleOtherLang"></span> -->
                            </el-input>
                        </el-form-item>

                        <el-form-item label="全拼：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinFull"></el-input>
                        </el-form-item>

                        <!-- <el-form-item label="曾用名：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.nameUsedBefore"></el-input>
                        </el-form-item>

                        <el-form-item label="昵称：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.nickName"></el-input>
                        </el-form-item> -->

                        <el-form-item label="相似艺人：">
                            <el-input
                                :readonly="true"
                                :disabled="propsData.disabled"
                                class="w"
                                v-model="form.resembleActor.join(',')"
                                @keyup.native.enter="handleResembleActor()"
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-search"
                                    :style="{ 'font-size': '18px', cursor: 'pointer' }"
                                    @click="handleResembleActor()"
                                ></i>
                            </el-input>
                            <!-- <el-input :disabled="propsData.disabled" class="w" v-model="form.resembleActor.join('/')"></el-input> -->
                        </el-form-item>

                        <el-form-item label="简拼：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinShort"></el-input>
                        </el-form-item>

                        <el-form-item label="外文名：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.foreignName"></el-input>
                        </el-form-item>

                        <el-form-item label="别名：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.aliasName"></el-input>
                        </el-form-item>

                        <el-form-item label="是否知名歌手：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.famousFlag"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <!-- <el-form-item label="热度：">
                            <el-select :disabled="propsData.disabled" :clearable="true" v-model="form.grade" class="handle-select mr10 w">
                                <el-option key="0" label="否" :value="0"></el-option>
                                <el-option key="1" label="是" :value="1"></el-option>
                            </el-select>
                        </el-form-item> -->

                        <!-- <el-form-item label="状态：" prop="status">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.status"
                                placeholder="请选择状态"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="上线" :value="1"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <!-- <el-form-item label="黑名单：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.blackFlag"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="非黑名单" :value="false"></el-option>
                                <el-option key="1" label="黑名单" :value="true"></el-option>
                            </el-select>
                        </el-form-item> -->

                        <!-- <el-form-item label="歌手类型：" prop="type">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.type"
                                placeholder="请选择歌手类型"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="华语男" :value="101"></el-option>
                                <el-option key="1" label="华语女" :value="102"></el-option>
                                <el-option key="2" label="华语组合" :value="103"></el-option>
                                <el-option key="3" label="韩语男" :value="104"></el-option>
                                <el-option key="4" label="韩语女" :value="105"></el-option>
                                <el-option key="5" label="韩语组合" :value="106"></el-option>
                                <el-option key="6" label="日语男" :value="107"></el-option>
                                <el-option key="7" label="日语女" :value="108"></el-option>
                                <el-option key="8" label="日语组合" :value="109"></el-option>
                                <el-option key="9" label="欧美男" :value="110"></el-option>
                                <el-option key="10" label="欧美女" :value="111"></el-option>
                                <el-option key="11" label="欧美组合" :value="112"></el-option>
                                <el-option key="12" label="乐团" :value="113"></el-option>
                                <el-option key="13" label="演奏家" :value="114"></el-option>
                                <el-option key="14" label="指挥家" :value="115"></el-option>
                                <el-option key="15" label="作曲家" :value="116"></el-option>
                            </el-select>
                        </el-form-item> -->

                        <el-form-item label="歌手角色：" prop="role">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.role"
                                placeholder="请选择歌手角色"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="演唱" value="1"></el-option>
                                <el-option key="1" label="演奏" value="2"></el-option>
                                <el-option key="2" label="作词" value="4"></el-option>
                                <el-option key="3" label="作曲" value="8"></el-option>
                                <el-option key="4" label="艺术表演" value="16"></el-option>
                                <el-option key="5" label="指挥" value="32"></el-option>
                                <el-option key="6" label="编曲" value="64"></el-option>
                            </el-select>
                        </el-form-item>

                        <!-- <el-form-item label="绑定id:">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.externalId"></el-input>
                        </el-form-item> -->

                        <el-form-item label="擅长的乐器：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.musicalInstrument"></el-input>
                        </el-form-item>

                        <el-form-item label="兴趣爱好：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.interest"></el-input>
                        </el-form-item>

                        <el-form-item label="性别：" prop="gender">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.gender"
                                placeholder="请选择性别"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="女" :value="0"></el-option>
                                <el-option key="1" label="男" :value="1"></el-option>
                                <el-option key="2" label="未知" :value="2"></el-option>
                                <el-option key="3" label="组合" :value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="毕业学校：">
                            <el-input :disabled="propsData.disabled" class="w" clearable v-model="form.college"></el-input>
                        </el-form-item>

                        <el-form-item label="最高学历：">
                            <el-input :disabled="propsData.disabled" class="w" clearable v-model="form.education"></el-input>
                        </el-form-item>

                        <el-form-item label="出道日期：">
                            <div class="block w">
                                <el-date-picker
                                    :disabled="propsData.disabled"
                                    :clearable="true"
                                    class="w"
                                    v-model="form.debutDate"
                                    type="date"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <!-- <el-form-item label="敏感信息：">
                            <el-input :disabled="propsData.disabled" class="w"></el-input>
                        </el-form-item> -->

                        <el-form-item label="职业：">
                            <el-select
                                :disabled="propsData.disabled"
                                class="w"
                                v-model="form.profession"
                                multiple
                                placeholder="请选择"
                                clearable
                            >
                                <el-option v-for="(item, index) in professions" :key="index" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="代表作:">
                            <el-input
                                :disabled="propsData.disabled"
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.representative"
                                maxlength="10000"
                                show-word-limit
                                rows="5"
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item label="主要成就:">
                            <el-input
                                :disabled="propsData.disabled"
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.achievement"
                                maxlength="10000"
                                show-word-limit
                                rows="5"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="荣誉记录:">
                            <el-input
                                :disabled="propsData.disabled"
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.honour"
                                maxlength="10000"
                                show-word-limit
                                rows="5"
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="display: inline-block" class="wrapper-right">
                        <el-form-item prop="tblActorPictures">
                            <div class="upload-file">
                                <div class="show-img" v-if="show">
                                    <img ref="img" :src="avatar" alt="" />
                                    <span class="after" @click="removeFile(0)"
                                        ><img src="@/assets/img/ico_feedback_delete@2x.png" alt=""
                                    /></span>
                                </div>
                                <!-- 文件上传按钮 -->
                                <a href="javascript:void(0)" class="btn" v-if="!show">
                                    <span class="add-btn">
                                        <img src="@/assets/img/ico_feedback_add@2x.png" alt="" />
                                    </span>
                                    <input
                                        :disabled="propsData.disabled"
                                        type="file"
                                        accept="image/*"
                                        capture="camera"
                                        id="file"
                                        name="file"
                                        @change="upload"
                                    />
                                </a>
                            </div>

                            <div class="upload-btn">
                                <div class="img-size">
                                    <p class="tips-title">上传图片至少：240*240（文件不大于1M）</p>
                                    <p class="size">
                                        <label for="240">
                                            <input type="radio" name="size" id="240" />
                                            240
                                        </label>
                                        <label for="320">
                                            <input type="radio" name="size" id="320" />
                                            320
                                        </label>
                                        <label for="600">
                                            <input type="radio" name="size" id="600" />
                                            600
                                        </label>
                                        <label for="1000">
                                            <input type="radio" name="size" id="1000" />
                                            1000
                                        </label>
                                    </p>
                                </div>
                                <a v-if="propsData.btn" href="javascript:void(0)" class="btn">
                                    上传图片
                                    <input type="file" id="file" accept="image/*" name="file" @change="upload" />
                                </a>
                            </div>
                        </el-form-item>

                        <el-form-item label="区域：" prop="area">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.area"
                                placeholder="请选择区域"
                                class="handle-select mr10 w"
                            >
                                <el-option key="1" label="华语" value="1"></el-option>
                                <el-option key="2" label="欧美" value="2"></el-option>
                                <el-option key="3" label="日韩" value="3"></el-option>
                                <el-option key="4" label="其他" value="4"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="国籍：">
                            <el-select
                                :disabled="propsData.disabled"
                                placeholder="请选择国籍"
                                :clearable="true"
                                filterable
                                class="handle-select mr10 w"
                                v-model="form.country"
                            >
                                <el-option-group v-for="group in countrys" :key="group.label" :label="group.label">
                                    <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                                        <span style="float: left">{{ item.label }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="出生日期：">
                            <div class="block w">
                                <el-date-picker
                                    :disabled="propsData.disabled"
                                    :clearable="true"
                                    class="w"
                                    v-model="form.birthday"
                                    type="date"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <el-form-item label="出生地：">
                            <el-input :disabled="propsData.disabled" class="w" clearable v-model="form.birthPlace"></el-input>
                        </el-form-item>

                        <el-form-item label="民族：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.nation"
                                placeholder="请选择民族"
                                class="handle-select mr10 w"
                            >
                                <el-option v-for="(item, index) in nations" :key="index" :label="item" :value="index"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="身高(单位：cm)：">
                            <el-input :disabled="propsData.disabled" class="w" clearable v-model="form.height"></el-input>
                        </el-form-item>

                        <el-form-item label="体重(单位：KG)：">
                            <el-input :disabled="propsData.disabled" class="w" clearable v-model="form.weight"></el-input>
                        </el-form-item>

                        <el-form-item label="血型：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.bloodType"
                                placeholder="请选择血型"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="A型" value="0"></el-option>
                                <el-option key="1" label="B型" value="1"></el-option>
                                <el-option key="2" label="O型" value="2"></el-option>
                                <el-option key="3" label="AB型" value="3"></el-option>
                                <el-option key="4" label="Rh阳性" value="4"></el-option>
                                <el-option key="5" label="Rh阴性" value="5"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="星座：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.constellation"
                                placeholder="请选择星座"
                                class="handle-select mr10 w"
                            >
                                <el-option key="1" label="水瓶座" value="1"></el-option>
                                <el-option key="2" label="双鱼座" value="2"></el-option>
                                <el-option key="3" label="白羊座" value="3"></el-option>
                                <el-option key="4" label="金牛座" value="4"></el-option>
                                <el-option key="5" label="双子座" value="5"></el-option>
                                <el-option key="6" label="巨蟹座" value="6"></el-option>
                                <el-option key="7" label="狮子座" value="7"></el-option>
                                <el-option key="8" label="处女座" value="8"></el-option>
                                <el-option key="9" label="天秤座" value="9"></el-option>
                                <el-option key="10" label="天蝎座" value="10"></el-option>
                                <el-option key="11" label="射手座" value="11"></el-option>
                                <el-option key="12" label="摩羯座" value="12"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="简介:">
                            <el-input
                                :disabled="propsData.disabled"
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.introduction"
                                maxlength="10000"
                                show-word-limit
                                rows="5"
                                @input.native="introSearch"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="从艺历程:">
                            <el-input
                                :disabled="propsData.disabled"
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.artHistory"
                                maxlength="10000"
                                show-word-limit
                                rows="5"
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>

                <el-form-item style="text-align: right; margin-right: 5%">
                    <el-button v-if="propsData.btn" type="reset" @click="handleCancel">取消</el-button>
                    <el-button
                        v-if="propsData.btn"
                        type="primary"
                        @click="handleSave"
                        :disabled="
                            legals.includes(true) ||
                            checkRequire({
                                name: form.name,
                                role: form.role,
                                gender: form.gender,
                                area: form.area
                            })
                        "
                        >保存</el-button
                    >
                </el-form-item>
            </el-form>
        </div>

        <!-- 其他国家语言弹出框 -->
        <!-- <el-dialog :close-on-click-modal="false" title="其他名称" :visible.sync="otherLangVisible" width="50%">
            <div class="limiter" v-if="form.tblActorLangs && form.tblActorLangs.length > 0">
                <div class="container-table">
                    <div class="wrap-table">
                        <div class="data-table ver1 m-b-110">
                            <div class="table-head">
                                <table>
                                    <thead>
                                        <tr class="row head">
                                            <th class="cell column1" :style="{ width: '40%' }">地区</th>
                                            <th class="cell column2" :style="{ width: 'auto' }">名称</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <div class="table-body">
                                <table>
                                    <tbody>
                                        <tr v-for="(item, index) in form.tblActorLangs" :key="index" class="row body">
                                            <td class="cell column1" :style="{ width: '40%' }">{{ getCountryName(item.language) }}</td>
                                            <td class="cell column2" :style="{ width: 'auto' }">{{ item.importName }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog> -->

        <!-- 相似艺人弹出框 -->
        <el-dialog :close-on-click-modal="false" title="相似艺人" :visible.sync="resembleActorVisible" width="50%">
            <div class="container">
                <div class="handle-box">
                    <el-input
                        @keyup.native.enter="handleSearchResembleActor"
                        v-model="query_4.ids"
                        placeholder="歌手ID"
                        class="mr10"
                        style="width: 120px"
                        clearable
                    ></el-input>

                    <el-button type="primary" :disabled="disabled" @click="handleSearchResembleActor">搜索</el-button>
                </div>
                <el-table
                    v-if="tableData_4.length > 0"
                    :data="tableData_4"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column label="ID" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>

                    <el-table-column label="歌手名" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.importName }}</template>
                    </el-table-column>

                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                :disabled="scope.row.relaResultForms === ''"
                                @click="handleResembleActorAdd(scope.$index, scope.row)"
                                >添加</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
  import { countrys } from '@/components/common/';
  import { languages } from '@/components/common/';
  import { nations } from '@/components/common/';
  import { mapGetters, mapMutations, mapActions } from 'vuex';
  import { debounce, throttle } from '@/utils/utils.js';
  import NProgress from 'nprogress';
  import axios from 'axios';
  export default {
      name: 'SingerInfo_1',
      props: {
          propsData: {
              type: Object,
              default: function () {
                  return {
                      btn: true,
                      disabled: false
                  };
              }
          }
      },
      data() {
          return {
              query_4: {
                  ids: '',
                  pageIndex: 1,
                  pageSize: 10
              },
              tableData_4: [],
              resembleActorVisible: false,
              disabled: false,

              //   otherLangVisible: false,
              legals: [false, false, false],
              countrys,
              languages,
              nations,
              baseUrl: process.env.VUE_APP_SRC1,
              show: true,
              avatar: null,
              rules: {
                  name: [{ required: true, message: '请填写歌手名称', trigger: 'blur' }],
                  // type: [{ required: true, message: '请选择歌手类型', trigger: 'change' }],
                  role: [{ required: true, message: '请选择歌手角色', trigger: 'change' }],
                  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
                  area: [{ required: true, message: '请选择区域', trigger: 'change' }],
                  // status: [{ required: true, message: '请选择状态', trigger: 'change' }],
                  tblActorPictures: [{ required: true, message: '请上传歌手图片', trigger: 'change' }]
              },
              professions: [
                  { value: '1', label: '歌手' },
                  { value: '2', label: '演员' },
                  { value: '3', label: '主持人' },
                  { value: '4', label: '作曲家' },
                  { value: '5', label: '制作人' },
                  { value: '6', label: '配音演员' },
                  { value: '7', label: '作家' },
                  { value: '8', label: '导演' },
                  { value: '9', label: 'DJ' },
                  { value: '10', label: '歌唱家' },
                  { value: '11', label: '指挥家' },
                  { value: '12', label: '模特' },
                  { value: '13', label: '乐队主唱' },
                  { value: '14', label: '唱作人' },
                  { value: '15', label: '曲作者' },
                  { value: '16', label: '词作者' },
                  { value: '17', label: '作词家' },
                  { value: '18', label: '乐队吉他手' },
                  { value: '19', label: '乐队贝斯手' },
                  { value: '20', label: '乐队鼓手' },
                  { value: '21', label: '乐队键盘手' },
                  { value: '22', label: '演奏家' },
                  { value: '23', label: '编剧' },
                  { value: '24', label: '配乐师' },
                  { value: '25', label: '编曲' },
                  { value: '26', label: '录音师' },
                  { value: '27', label: '制片人' },
                  { value: '28', label: '独立音乐人' },
                  { value: '29', label: '原创音乐人' },
                  { value: '30', label: '乐评人' },
                  { value: '31', label: 'FUNS歌手' },
                  { value: '32', label: '视频彩铃首席体验官' }
              ],

              form: {
                  resembleActor: []
              },
              coverImage: null
          };
      },
      watch: {
          $route: {
              deep: true,
              immediate: true,
              handler(a, b) {
                  console.log(a, b);
                  if (a.name === 'AddSinger') {
                      // if (this.$route.query.id) {
                      //     if (Object.keys(this.form).length === 0) {
                      //         // 获取歌手信息
                      //         this.getDataById(this.$route.query.id);
                      //         // 获取歌曲信息和专辑信息id
                      //         this.ids(this.$route.query.id);
                      //     }
                      // }
                  }
              }
          }
      },
      destroyed() {
          // if (!this.tagsList.some(item => item.name === 'SingerInfo')) {
          //     localStorage.removeItem('id_singer');
          //     localStorage.removeItem('indexFlag_singer');
          //     this.$storage.remove('operate');
          // } else {
          //     //  什么都不做
          // }
      },
      computed: {
          ...mapGetters({
              tagsList: 'tagsList'
              // form: 'songInfoForm'
          })
      },
      methods: {
          // 相似艺人
          handleResembleActor() {
              this.resembleActorVisible = true;
          },
          handleSearchResembleActor() {
              this.getResembleActor();
          },
          async getResembleActor() {
              try {
                  let _this = this;
                  this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
                  NProgress.start();
                  this.disabled = true;
                  let url = '/artist/list';
                  let { data: res } = await this.$http[0].get(url, {
                      cancelToken: new axios.CancelToken(function executor(c) {
                          _this.source = c;
                      }),
                      params: this.$removeField({
                          page: this.query_4.pageIndex,
                          size: this.query_4.pageSize,
                          ids: this.query_4.ids.trim()
                      })
                  });
                  console.log('歌手管理', res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  // 中间处理
                  if (res.data.content && res.data.content.length > 0) {
                      this.tableData_4 = res.data.content;
                  } else {
                      this.tableData_4 = [];
                  }
                  NProgress.done();
                  this.disabled = false;
              } catch (err) {
                  console.dir(err);
                  NProgress.done();
                  this.disabled = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          handleResembleActorAdd(index, row) {
              // this.$confirm('确认绑定吗?', '提示', {
              //     type: 'warning'
              // })
              //     .then(() => {
              //         // this.$handleUnlock.call(this, this.save, '/song/unlock', this.form.id);
              //         this.resembleActor(row);
              //     })
              //     .catch(() => {});
              this.form = { ...this.form, resembleActor: [...this.form.resembleActor, row.id] };
          },
          cancelQuest() {
              if (typeof this.source === 'function') {
                  this.source('终止请求');
              }
          },

          getCountryName(lang) {
              let languages = this.languages;
              for (let i = 0, len = languages.length; i < len; i++) {
                  if (lang === languages[i].value) {
                      return languages[i].label;
                  }
              }
          },
          //   handleOtherLang() {
          //       this.otherLangVisible = true;
          //   },
          introSearch: debounce(function ({ target: { value } }) {
              if (!value) {
                  // 不输入关键词时恢复为原来的文本
                  // this.form.name = '';
                  return;
              }
              setTimeout(() => {
                  this.$getTextTest.call(this, value, 1);
              }, 500);
          }, 1000),
          singerSearch: debounce(function ({ target: { value } }) {
              if (!value) {
                  // 不输入关键词时恢复为原来的文本
                  // this.form.name = '';
                  return;
              }
              setTimeout(() => {
                  this.$getTextTest.call(this, value, 0);
              }, 500);
          }, 1000),
          checkRequire(obj) {
              return this.$isEmpty(obj);
          },
          // ...mapActions(['setAlbumInfoData', 'setSongInfoData']),
          ...mapMutations({
              // SET_SINGERINFO: 'SET_SINGERINFO',
              // SET_SONGALBUMIDS: 'SET_SONGALBUMIDS',
              SET_TAGSLIST: 'SET_TAGSLIST'
              // SET_QUKUARTIST_DATA: 'SET_QUKUARTIST_DATA',
              // SET_QUKUARTIST_FORM: 'SET_QUKUARTIST_FORM'
          }),

          // ids(sid) {
          //     Promise.all([
          //         this.wake('/song/list', {
          //             // ids: result[0].songIds.join(',')
          //             actorId: this.$route.query.id
          //         }),
          //         this.wake('/album/list', {
          //             // ids: result[0].albumIds.join(',')
          //             actorId: this.$route.query.id
          //         })
          //     ])
          //         .then(ret => {
          //             console.log(ret);
          //             ret = Array.from(ret);
          //             // 中间处理
          //             for (var i = 0; i < ret.length; i++) {
          //                 if (ret[i].list && ret[i].list.length && ret[i].list.length > 0) {
          //                     for (var item of ret[i].list) {
          //                         if (item.actors && item.actors.length && item.actors.length > 0) {
          //                             item.actors.name = '';
          //                             for (var val of item.actors) {
          //                                 item.actors.name += val.name + '/';
          //                             }
          //                             item.actors.name = item.actors.name.slice(0, -1);
          //                         } else {
          //                             item.actors = [];
          //                             item.actors.name = '';
          //                         }
          //                         item.tblAlbum = item.tblAlbum ? item.tblAlbum : {};
          //                         item.tblCppartner = item.tblCppartner ? item.tblCppartner : {};
          //                         item.releaseDate = this.$dateFormat(item.releaseDate, '', '-');
          //                         item.updateTime = this.$dateFormat(item.updateTime, '', '-');
          //                     }
          //                 } else {
          //                     ret[i].list = [];
          //                 }
          //             }
          //             // 歌曲信息
          //             if (ret[0].content && ret[0].content.length && ret[0].content.length > 0) {
          //                 for (var i = 0; i < ret[0].content.length; i++) {
          //                     if (ret[0].content[i].actors && ret[0].content[i].actors.length && ret[0].content[i].actors.length > 0) {
          //                         ret[0].content[i].actors.name = '';
          //                         ret[0].content[i].actors.map(item => {
          //                             ret[0].content[i].actors.name += item.name + '/';
          //                             ret[0].content[i].actors.name = ret[0].content[i].actors.name.slice(0, -1);
          //                         });
          //                     } else {
          //                         ret[0].content[i].actors = [];
          //                         ret[0].content[i].actors.name = '';
          //                     }
          //                 }

          //                 console.log(ret[0]);
          //                 this.setSongInfoData(ret[0]);
          //             }

          //             // 专辑信息
          //             if (ret[1].content && ret[1].content.length > 0) {
          //                 if (ret[1].content[0].actors && ret[1].content[0].actors.length > 0) {
          //                     ret[1].content[0].actors.name = '';
          //                     ret[1].content[0].actors.map(item => {
          //                         ret[1].content[0].actors.name += item.name + '/';
          //                         ret[1].content[0].actors.name = ret[1].content[0].actors.name.slice(0, -1);
          //                     });
          //                 } else {
          //                     ret[1].content[0].actors = [];
          //                     ret[1].content[0].actors.name = '';
          //                 }

          //                 this.setAlbumInfoData(ret[1]);
          //             }
          //         })
          //         .catch(error => {
          //             console.dir(error);
          //         });
          // },
          // wake(url, params) {
          //     return new Promise((resolve, reject) => {
          //         this.geSongAlbumID(resolve, url, params);
          //     });
          // },
          // async geSongAlbumID(resolve, url, params) {
          //     try {
          //         // let url = '/artist/getIdByaid';
          //         let { data: res } = await this.$http[0].get(url, {
          //             // params: {
          //             //     actorId: sid
          //             // }
          //             params
          //         });
          //         // console.log('ids', res);
          //         resolve(res.data);
          //         // return res.data;
          //     } catch (err) {
          //         this.$message.error({
          //             message: err.message,
          //             duration: 1500
          //         });
          //     }
          // },
          // 获取歌手信息
          // async getDataById(sid) {
          //     try {
          //         NProgress.start();
          //         let url = '/artist/detail';
          //         let { data: res } = await this.$http[0].get(url, {
          //             params: this.$removeField({
          //                 id: sid,
          //                 indexFlag: localStorage.getItem('indexFlag_singer') ? localStorage.getItem('indexFlag_singer') : null
          //             })
          //         });
          //         if (res.code != '0000') {
          //             throw new Error(res.message);
          //         }
          //         console.log('歌手信息', res.data.profession);
          //         // 取值、设置默认值
          //         let requiredFields = {
          //             id: '',
          //             name: '',
          //             namePinyinFull: '',
          //             namePinyinShort: '',
          //             foreignName: '',
          //             aliasName: '',
          //             famousFlag: '',
          //             grade: '',
          //             status: '',
          //             blackFlag: '',
          //             type: '',
          //             role: '',
          //             externalId: '',
          //             musicalInstrument: '',
          //             interest: '',
          //             profession: [],
          //             gender: '',
          //             college: '',
          //             education: '',
          //             debutDate: '',
          //             area: '',
          //             country: '',
          //             birthday: '',
          //             birthPlace: '',
          //             nation: '',
          //             height: '',
          //             weight: '',
          //             bloodType: '',
          //             constellation: '',
          //             artHistory: '',
          //             representative: '',
          //             achievement: '',
          //             honour: '',
          //             introduction: '',
          //             tblActorPictures: [{ filePath: '' }],
          //             importName: '',
          //             tblActorLangs: []
          //         };
          //         // console.log(Object.keys(requiredFields));
          //         var ret = this.$chooseFields(res.data, Object.keys(requiredFields), {}, requiredFields);
          //         // console.log(res.data.profession);
          //         ret.profession = res.data.profession ? res.data.profession.split(',') : [];
          //         // console.log(res.data.profession.split(','));
          //         // console.log(ret);
          //         // 中间处理
          //         ret.birthday = ret.birthday ? new Date(parseInt(ret.birthday)) : '';
          //         console.log(ret.tblActorPictures[0].filePath !== '');
          //         if (ret.tblActorPictures[0].filePath !== '') {
          //             this.avatar = `${this.baseUrl}/api/stream/audio?path=${ret.tblActorPictures[0].filePath}`;
          //             this.show = true;
          //         } else {
          //             this.avatar = null;
          //             this.show = false;
          //         }
          //         // 赋值
          //         // this.form = ret;
          //         this.SET_SINGERINFO(ret);
          //         this.$setActiveTag.call(this, ret.name);
          //         this.SET_QUKUARTIST_FORM(ret);

          //         NProgress.done();
          //     } catch (err) {
          //         console.dir(err);
          //         NProgress.done();
          //         this.$message.error({
          //             message: err.message,
          //             duration: 1500
          //         });
          //     }
          // },

          handleSave() {
              this.$confirm('确定要提交吗？', '提示', {
                  type: 'warning'
              })
                  .then(() => {
                      // this.$handleUnlock.call(this, this.save, '/artist/unlock', this.form.id);
                      this.save();
                  })
                  .catch(() => {});
          },
          async save() {
              try {
                  let url = '/artist/create';
                  var params = this.$removeField({
                      // id: this.form.id,
                      introduction: this.form.introduction,
                      area: this.form.area,
                      type: this.form.type,
                      bloodType: this.form.bloodType,
                      constellation: this.form.constellation,
                      country: this.form.country,
                      // profession: this.form.profession.join(','),
                      profession: this.form.profession,
                      achievement: this.form.achievement,
                      aliasName: this.form.aliasName,
                      artHistory: this.form.artHistory,
                      birthPlace: this.form.birthPlace,
                      birthday: this.$dateFormat(this.$getTimeStamp(this.form.birthday), '', '-'),
                      // blackFlag: this.form.blackFlag,
                      college: this.form.college,
                      debutDate: this.$dateFormat(this.$getTimeStamp(this.form.debutDate), '', '-'),
                      education: this.form.education,
                      famousFlag: this.form.famousFlag,
                      foreignName: this.form.foreignName,
                      gender: this.form.gender,
                      height: this.form.height,
                      honour: this.form.honour,
                      interest: this.form.interest,
                      musicalInstrument: this.form.musicalInstrument,
                      nation: this.form.nation,
                      representative: this.form.representative,
                      role: this.form.role,
                      weight: this.form.weight,
                      name: this.form.name,
                      namePinyinFull: this.form.namePinyinFull,

                      // nameUsedBefore: this.form.nameUsedBefore,
                      // nickName: this.form.nickName,
                      resembleActor: this.form.resembleActor,

                      namePinyinShort: this.form.namePinyinShort,

                      coverImage: this.coverImage
                  });
                  var formdata = new FormData();
                  for (var key in params) {
                      formdata.append(key, params[key]);
                  }
                  let { data: res } = await this.$http[0].post(url, formdata, {
                      headers: {
                          name: localStorage.getItem('ms_username')
                          // 'Content-Type': 'multipart/form-data'
                      }
                  });
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }

                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });

                  this.$closeActiveTag.call(this);
                  this.$router.replace({
                      path: '/singer_/admin'
                  });
                  this.form = {};
                  // this.SET_QUKUARTIST_DATA([]);
              } catch (err) {
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },

          cancel() {
              this.form = {};
              this.$closeActiveTag.call(this);
              this.$router.replace({
                  path: '/singer_/admin'
              });
          },
          handleCancel() {
              this.$handleUnlock.call(this, this.cancel, '/artist/unlock', this.form.id);
          },
          removeFile(index = 0) {
              // if (this.form.tblActorPictures[0]) {
              //     this.form.tblActorPictures[0].filePath = '';
              // }

              this.avatar = null;
              this.show = false;
              this.coverImage = null;
          },
          upload(e) {
              var event = e || window.event;
              var target = event.target || e.srcElement;
              var file = target.files[0];
              let isLt1M = file.size / 1024 / 1024 <= 1;
              if (!isLt1M) {
                  return this.$message.error('上传图片大小不能超过1MB!');
              }
              this.show = true;
              let promise = this.$getImgTest_plus.call(this, e, target, file, 2, () => {}, 'avatar');
              promise.then(() => {
                  this.$getImgNaturalDimensions(this.$refs['img'], (dimensions) => {
                      console.log(dimensions);
                      if (dimensions.w < 800 || dimensions.h < 800) {
                          this.$message.warning({
                              message: '图片尺寸不能小于 800 * 800',
                              duration: 1500
                          });
                          this.removeFile();
                      }
                  });
              });

              // this.uploadFile(e);
          }
          // async uploadFile(e, target, file) {
          //     try {
          //         let isLt5M = file.size / 1024 / 1024 <= 5;
          //         if (!isLt5M) {
          //             return this.$message.error('上传图片大小不能超过5MB!');
          //         }

          //         var formdata = new FormData();
          //         formdata.append('coverImage', file);
          //         formdata.append('id', this.$route.query.id);
          //         let url = '/artist/uploadImg';

          //         let { data: res } = await this.$http[0].post(url, formdata, {
          //             headers: {
          //                 'Content-Type': 'multipart/form-data',
          //                 name: localStorage.getItem('ms_username')
          //             }
          //         });
          //         console.log('响应数据', res);
          //         target.value = null;
          //         if (res.code != '0000') {
          //             this.$message.error({
          //                 message: res.message,
          //                 duration: 1500
          //             });
          //         } else {
          //             this.$message.success({
          //                 message: res.message,
          //                 duration: 1500
          //             });
          //             this.getDataById(this.$route.query.id);
          //         }
          //     } catch (err) {
          //         console.dir(err);
          //         target.value = null;
          //         this.$message.error({
          //             message: err.message,
          //             duration: 1500
          //         });
          //     }
          // }
      }
  };
</script>

<style lang="scss">
  #SingerInfo_1 {
      .icon-qita {
          font-size: 18px;
          cursor: pointer;
      }
      .limiter * {
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
      }
      /*==================================================================
                          [ 表格宽度 ]*/
      .limiter {
          ::-webkit-scrollbar {
              display: none;
          }

          // 　　width: 80%;
          margin: 10px auto 0;
          /*---------------------------------------------*/

          .container-table {
              width: 100%;
              background: #fff;
              // padding: 0px 30px;
          }

          .wrap-table {
              width: 100%;
          }

          .data-table {
              background-color: #fff;
          }

          table {
              width: 100%;
              border-collapse: collapse;
          }

          th {
              text-align: center;
              font-weight: bold;
              border: 1px solid gray;
          }

          td {
              font-weight: unset;
              text-align: center;
              border: 1px solid gray;
          }

          /*==================================================================
                          [ 单元格宽度 ]*/
          .column1 {
              width: 20%;
          }

          .column2 {
              // width: 60%;
              width: auto;
          }

          .column3 {
              width: 40%;
          }

          // .column4 {
          //     width: 19%;
          // }

          // .column5 {
          //     width: 13%;
          // }
          /*---------------------------------------------*/

          .table-head th {
              padding-top: 10px;
              padding-bottom: 10px;
          }

          .table-body td {
              height: 46px;
          }

          /*==================================================================
                          [ Fix header ]*/
          .data-table {
              position: relative;
              padding-top: 46px;
          }

          .table-head {
              position: absolute;
              width: 100%;
              top: 0;
              left: 0;
          }

          .table-body {
              max-height: 231px;
              overflow: auto;
              width: 100%;
          }

          /*==================================================================
                          [ Ver1 ]*/

          .data-table.ver1 th {
              font-family: Lato-Bold;
              font-size: 18px;
              color: #333;
              background-color: #e5e5e5;
          }

          .data-table.ver1 td {
              font-family: Lato-Regular;
              font-size: 14px;
              color: #808080;
          }
      }
      .handle-box {
          margin-bottom: 20px;
      }

      .handle-select {
          /* width: 120px; */
          width: 185px;
      }

      .handle-input {
          width: 300px;
          display: inline-block;
      }
      .table {
          width: 100%;
          font-size: 14px;
      }
      .red {
          color: #ff0000;
      }
      .mr10 {
          margin-right: 10px;
      }
      .table-td-thumb {
          display: block;
          margin: auto;
          width: 40px;
          height: 40px;
      }
      .w {
          // width: 470px !important;
          width: 100% !important;
      }

      .upload-file {
          background: transparent;
          position: relative;
          box-sizing: border-box;
          display: grid;
          grid-template-columns: 100%;
          grid-template-rows: 260px;
          align-items: center;
          align-content: flex-start;
          justify-items: center;
          grid-auto-flow: row;
          margin-bottom: 10px;
          .show-img {
              width: 250px;
              height: 250px;
              position: relative;
              border-radius: 15px;
              img {
                  width: 100%;
                  height: 100%;
                  border-radius: 15px;
                  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
              }
              .after {
                  position: absolute;
                  right: -0.26rem;
                  top: -0.26rem;
                  font-size: 1.04rem;
                  width: 1.04rem;
                  height: 1.04rem;
                  line-height: 1.04rem;
                  text-align: center;
              }
          }
          .btn {
              border: 1px dashed #666;
              position: relative;
              left: 0;
              display: inline-block;
              text-align: center;
              color: #fff;
              text-decoration: none;
              width: 250px;
              height: 250px;
              border-radius: 15px;
              .add-btn {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: center;
                  width: 30px;
                  height: 30px;
                  border-radius: 15px;
                  img {
                      width: 100%;
                      height: 100%;
                  }
              }
              #file {
                  opacity: 0;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                  border-radius: 15px;
              }
          }
      }

      .upload-btn {
          // text-align: right;
          display: flex;
          flex-direction: row;
          justify-content: center;
          // padding-left: 110px;
          // margin-right: 120px;
          align-items: center;
          .img-size {
              // margin-right: 30px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: left;

              .tips-title {
                  font-size: 14px;
                  height: 16px;
                  line-height: 16px;
                  margin-bottom: 10px;
              }
              .size {
                  height: 16px;
                  line-height: 16px;
                  margin-left: 2px;
                  label {
                      cursor: pointer;
                      margin-right: 10px;
                      input {
                          cursor: pointer;
                      }
                  }
              }
          }
          .btn {
              position: relative;
              display: inline-block;
              text-align: center;
              color: #fff;
              text-decoration: none;
              width: 80px;
              height: 32px;
              line-height: 32px;
              background: #409eff;
              border-radius: 3px;
              font-size: 12px;
              vertical-align: middle;
              margin-left: 10px;
          }
          input[name='file'] {
              opacity: 0;
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
          }
      }

      .wrapper {
          display: grid;
          grid-template-columns: 45% 55%;
          justify-content: flex-start;
          justify-items: left;
          grid-auto-flow: row;
          align-items: flex-start;
          align-content: flex-start;
          padding-top: 10px;
          box-sizing: border-box;
          .wrapper-left {
              width: 90%;
          }
          .wrapper-right {
              width: 90%;
              transform: translate3d(0px, -5px, 0px);
              .el-form-item {
                  &:first-of-type {
                      .el-form-item__content {
                          // display: flex;
                          // flex-direction: row;
                          // align-items: center;
                      }
                  }
              }
          }
          // .el-form-item {
          //     .el-form-item__content {
          //         margin-left: 0 !important;
          //         text-align: right;
          //     }
          // }
      }

      .el-breadcrumb__inner {
          cursor: pointer !important;
      }
  }
</style>
